<template>
  <view class="Bseps">
    <ul class="Bseps_list">
      <li class="Bseps_list_li" v-for="item, indexs in list" :key="indexs">
        <view class="Bseps_list_line" :style="`background:${item.lineBg}`" v-if="indexs !== (list.length - 1)"></view>
        <view class="flex">
          <view class="Bseps_list_inactive" :style="`background:${item.color || inactive}`"></view>
          <view class="Bseps_list_right">
            <view :style="`color:${item.color || inactive}`">{{ item.name }}</view>
            <view class="Bseps_list_right_hui" v-if="item.time">{{ item.time }}</view>
          </view>
        </view>
      </li>
    </ul>
  </view>
</template>
<script setup lang="ts">
/**
  @param{
    list: { name: '配送开始', time: '2023-08-16 14:08:21' }
    current: number 位置
    inactive: 常态颜色,
    active: 选中颜色
  } 
 
 */
import { ref, toRefs, watch, nextTick } from "vue";
export interface Props {
  list?: any,
  current?: string | number,
  inactive?: string,
  active?: string,
}
const props = withDefaults(defineProps<Props>(), {
  list: [],
  current: 0,
  inactive: '',
  active: ''
})
const { current, list, inactive, active } = toRefs(props)
watch(current, (Node) => {
  let arr = []
  list.value.map(item => { item.bgcolor = ''; item.lineBg = '' })
  nextTick(() => {
    for (let i = 0; i <= Node; i++) {
      list.value[i].color = active
      list.value[i].lineBg = inactive
      console.log(i, Node)
      if (i != Node) {
        list.value[i].lineBg = active
      }
    }
    list.value = list.value
  })
}, { deep: true, immediate: true })
</script>
<style lang="scss" scoped>
.Bseps {
  position: relative;

  &_list {
    &_li {
      position: relative;
      padding-bottom: 40rpx;

    }

    &_line {
      width: 1rpx;
      height: 100%;
      top: 30rpx;
      left: 9rpx;
      background: #919191;
      position: absolute;
    }

    // &_line:nth-last-child(2) {
    //   background: red;
    // }

    &_li:nth-last-child(1) {
      padding-bottom: 0;
    }

    &_inactive {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      // background: $background_;
      margin-top: 10rpx;
    }

    &_right {
      margin-left: 10rpx;

      &_hui {
        color: #919191;
        font-size: 24rpx;
      }
    }
  }
}
</style>